Newly available across major browsers
Chrome 114, Chrome Android 114, Edge 114, Firefox 125, Firefox Android 125, Opera 100, Safari 17, Safari iOS 17
Baseline since 2024
<button> element into a popover control button; takes the ID of the popover element to control as its value. Establishing a relationship between a popover and its invoker button using the popovertarget attribute has two additional useful effects:
- The browser creates an implicit
aria-detailsandaria-expandedrelationship between popover and invoker, and places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard and assistive technology (AT) users (see also Popover accessibility features). - The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using CSS anchor positioning. See Popover anchor positioning for more details.